﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stock chart demo</title>
    <link href="../css/quote2.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->

    <script src="../lib//jquery.js" type="text/javascript"></script>

    <script src="../lib/migratory-jslib.js" type="text/javascript"></script>

    <script src="../lib/webtoolkit.contextmenu.js" type="text/javascript"></script>

    <script src="../lib/jquery.flot.js" type="text/javascript"></script>

    <script src="../js/QuoteData.js" type="text/javascript"></script>

    <!--  <script src="../lib/jquery.flot.min.js" type="text/javascript"></script>-->
    <!-- <script src="../js/quoteData.min.js" type="text/javascript"></script>-->
    <!--<script src="../lib/rtqcn.min.js" type="text/javascript"></script>-->

    <script src="../js/dragdrop.js" type="text/javascript"></script>

    <script src="http://globalquote.morningstar.com/globalcomponent/js/common_pack_0.0.2.js"
        type="text/javascript"></script>

    <script src="http://globalquote.morningstar.com/culturefmt/getfmt.ashx?lan=en-US"
        type="text/javascript"></script>

    <script>var debug = true; var isDebug = false;</script>

    <script src="../js/DBHelper.js" type="text/javascript"></script>

</head>
<body>
    <div id="container" style="float: left; width: 760px;" class="rtc-chart-out">
        <div class="rtc-win" idkey="win_indicator" style="display: none">
            <div class="rtc-win-wrap">
                <div class="rtc-win-title">
                    <strong idkey="title">Exponential Moving Average (EMA)</strong> <a class="rtc-win-close">
                    </a>
                </div>
                <div class="rtc-win-content" idkey="content">
                    <dl>
                        <dt>Line1 period</dt>
                        <dd>
                            <input type="text" class="rtc-ctrl-input" value="" /></dd>
                    </dl>
                    <dl>
                        <dt>Line2 period</dt>
                        <dd>
                            <input type="text" class="rtc-ctrl-input" value="" /></dd>
                    </dl>
                    <dl>
                        <dt>Line3 period</dt>
                        <dd>
                            <input type="text" class="rtc-ctrl-input" value="" /></dd>
                    </dl>
                </div>
                <div class="rtc-win-action">
                    <a href="javascript:void(0)" class="ok" idkey="dawBt">&nbsp;Draw&nbsp;</a> <a href="javascript:void(0)"
                        idkey="cancelBt">Cancel</a> <a href="javascript:void(0)" idkey="removeBt">Remove</a>
                </div>
            </div>
        </div>
        <ul idkey="CM1" class="rtrm-ot">
            <li class="rtrm-out"><a vkey="1" href="javascript:void(0)" class="rtrm-arrow">Chart
                Type</a>
                <ul idkey="divPlotStyle">
                    <li><a href="javascript:void(0)" menuitemstyle="trigger" value="lines" catkey="lineType">
                        Line</a></li>
                    <li><a href="javascript:void(0)" menuitemstyle="trigger" value="ohlc" catkey="lineType">
                        OHLC</a></li>
                    <li><a href="javascript:void(0)" menuitemstyle="trigger" value="candle" catkey="lineType">
                        Candlestick</a></li>
                </ul>
            </li>
              <li class="rtrm-out"><a
                                    href="javascript:void(0)" class="rtrm-arrow">Cursor Type</a>
                                    <ul idkey="divCursorType">
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="0" catkey="cursorType">
                                            Track Ball</a></li>
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="1" catkey="cursorType">
                                            Crosshair</a></li>
                                    </ul>
                                </li>
            <li class="rtrm-out"><a vkey="1" href="javascript:void(0)" class="rtrm-arrow">Frequency</a>
                <ul idkey="freul">
                    <li><a href="#" menuitemstyle="trigger" value="minute" catkey="timeSlot" class="on">
                        Minute</a></li>
                    <li><a href="#" menuitemstyle="trigger" value="d" catkey="timeSlot">Daily</a></li>
                    <li><a href="#" menuitemstyle="trigger" value="w" catkey="timeSlot">Weekly</a></li>
                    <li><a href="#" menuitemstyle="trigger" value="m" catkey="timeSlot">Monthly</a></li>
                </ul>
            </li>
            <li class="rtrm-out"><a vkey="2" href="javascript:void(0)" class="rtrm-arrow">Zoom</a>
                <ul idkey="timeRange">
                    <li><a idkey="a1" vkey="1" href="#">1 Day</a></li>
                    <li><a idkey="a2" vkey="2" href="#" class="on">5 Days</a></li>
                    <li><a idkey="a3" vkey="3" href="#">1 Month</a></li>
                    <li><a idkey="a4" vkey="4" href="#">3 Months</a></li>
                    <li><a idkey="a5" vkey="5" href="#">YTD</a></li>
                    <li><a idkey="a6" vkey="6" href="#">1 Year</a> </li>
                    <li><a idkey="a7" vkey="7" href="#">3 Years</a></li>
                    <li><a idkey="a8" vkey="8" href="#">5 Years</a></li>
                    <li><a idkey="a9" vkey="9" href="#">10 Years</a></li>
                    <li><a idkey="a10" vkey="10" href="#">Maximum</a>
                </ul>
            </li>
            <li class="rtrm-out"><a idkey="rightmenu" vkey="1" href="#" class="rtrm-arrow">Event</a>
                <ul>
                    <li><a>
                        <input type="checkbox" menuitemstyle="trigger" value="dividend" name="dividends"
                            catkey="event" />
                        <span>Dividend</span></a></li>
                    <li><a>
                        <input type="checkbox" menuitemstyle="trigger" value="splits" name="splits" catkey="event" />
                        <span>Splits</span></a></li>
                </ul>
            </li>
        </ul>
        <div class="rtc-ctrl1">
            <span class="rtc-ctrl-lb1B" style="padding-left: 5px">Compare</span>
            <input idkey="autoBox" class="rtc-ctrl-input" type="text" style="width: 90px;" value="" />
            <a href="#" idkey="addSecu" class="rtc-ctrl-go-button">ADD</a>
            <div idkey="downlist" class="rtc-auto-drop">
            </div>
            <div idkey="customRange" class="rtc-ctrl-sect">
                <input type="text" idkey="startBox" style="width: 60px;" class="rtc-ctrl-input" /><span
                    class="rtc-ctrl-lb1">to</span><input type="text" idkey="endBox" style="width: 60px;"
                        class="rtc-ctrl-input" />
            </div>
            <div class="rtc-ctrl-sect">
                <li menuitemstyle="item" class="rtc-pmtxt"><a mname="frequency" href="javascript:void(0)">
                    Daily </a>
                    <ul idkey="freul">
                        <li><a href="#" menuitemstyle="trigger" value="minute" catkey="timeSlot" class="on">
                            Minute</a></li>
                        <li><a href="#" menuitemstyle="trigger" value="d" catkey="timeSlot">Daily</a></li>
                        <li><a href="#" menuitemstyle="trigger" value="w" catkey="timeSlot">Weekly</a></li>
                        <li><a href="#" menuitemstyle="trigger" value="m" catkey="timeSlot">Monthly</a></li>
                    </ul>
                </li>
            </div>
            <div class="rtc-ctrl-sect">
                <span class="rtc-ctrl-lb1B">Zoom &nbsp;</span>
                <li class="rtc-pmtxt" menuitemstyle="item"><a href="javascript:void(0)" idkey="zoom">
                    5 Days </a>
                    <ul idkey="timeRange">
                        <li><a idkey="a1" vkey="1" href="#">1 Day</a></li>
                        <li><a idkey="a2" vkey="2" href="#" class="on">5 Days</a></li>
                        <li><a idkey="a3" vkey="3" href="#">1 Month</a></li>
                        <li><a idkey="a4" vkey="4" href="#">3 Months</a></li>
                        <li><a idkey="a5" vkey="5" href="#">YTD</a></li>
                        <li><a idkey="a6" vkey="6" href="#">1 Year</a> </li>
                        <li><a idkey="a7" vkey="7" href="#">3 Years</a></li>
                        <li><a idkey="a8" vkey="8" href="#">5 Years</a></li>
                        <li><a idkey="a9" vkey="9" href="#">10 Years</a></li>
                        <li><a idkey="a10" vkey="10" href="#">Maximum</a></li>
                    </ul>
                </li>
            </div>
        </div>
        <div idkey="chartControl" class="rtc-ctrl2">
            <div class="rtc-ctrl-sect" style="padding-left: 0">
                <li menuitemstyle="item" idkey="lineType" class="rtc-pmdd1" style="height: 26px"><a
                    class="rtc-pmddh1" href="javascript:void(0)" mname="trade">Line</a>
                    <ul idkey="divPlotStyle">
                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="lines" catkey="lineType">
                            Line</a></li>
                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="ohlc" catkey="lineType">
                            OHLC</a></li>
                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="candle" catkey="lineType">
                            Candlestick</a></li>
                    </ul>
                </li>
            </div>
            <div class="rtc-ctrl-sect">
                <span class="rtc-ctrl-lb2B">Mov.Avg</span>
                <input type="text" idkey="mov1" style="width: 40px;" class="rtc-ctrl-input" />
                <input type="text" idkey="mov2" style="width: 40px;" class="rtc-ctrl-input" />
                <input type="text" idkey="mov3" style="width: 40px;" class="rtc-ctrl-input" />
            </div>
            <div class="rtc-ctrl-sect">
                <li menuitemstyle="item" idkey="eventList" class="rtc-pmdd1" style="height: 26px"><a
                    class="rtc-pmddh1" href="javascript:void(0)" mname="event">Event</a>
                    <ul idkey="eventUL">
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="dividend" name="dividends"
                                catkey="event" />
                            <span>Dividend</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="splits" name="splits" catkey="event" />
                            <span>Splits</span></a></li>
                    </ul>
                </li>
            </div>
            <div class="rtc-ctrl-sect">
                <li menuitemstyle="item" idkey="eventList" class="rtc-pmdd1" style="height: 26px"><a
                    class="rtc-pmddh1" href="javascript:void(0)" mname="indicator">Indicator</a><ul>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="EMA" name="EMA" catkey="indicator" />
                            <span>EMA</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="BBands" name="BBands" catkey="indicator" />
                            <span>BBands</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="PSAR" name="PSAR" catkey="indicator" />
                            <span>PSAR</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="MACD" name="MACD" catkey="indicator" />
                            <span>MACD</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="RSI" name="RSI" catkey="indicator" />
                            <span>RSI</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="ROC" name="ROC" catkey="indicator" />
                            <span>ROC</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="SStochastic" name="SStochastic"
                                catkey="indicator" />
                            <span>Slow Stochastic</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="FStochastic" name="FStochastic"
                                catkey="indicator" />
                            <span>Fast Stochastic</span></a></li>
                        <li><a href="javascript:void(0)">
                            <input type="checkbox" menuitemstyle="trigger" value="WillR" name="WillR" catkey="indicator" />
                            <span>Will %R</span></a></li>
                    </ul>
                </li>
            </div>
        </div>
        <div idkey="chartLegend" class="rtc-legend-txt">
        </div>
        <div class="rtc-chart-container">
            <div idkey="priceChart" class="rtc-chart">
            </div>
            <div class="rtc-ctrl2">
                <div class="rtc-ctrl-sect">
                    <span class="rtc-ctrl-lb2B">Volume (mil)</span></div>
                <div class="rtc-ctrl-sect">
                    <span class="rtc-ctrl-lb2B">Mov.Avg</span>
                    <input idkey="movVol" style="width: 40px;" class="rtc-ctrl-input" type="text" /></div>
                <div class="rtc-ctrl-sect" style="float: right;">
                    <a href="#" idkey="volLink" class="rtc-ctrl-lb2B">Hide</a></div>
            </div>
            <div idkey="volChart" class="rtc-chart">
            </div>
            <div idkey="miniChart" class="rtc-chart">
                &nbsp;&nbsp;
            </div>
            <div class="rtc-silder-bottom">
                <div idkey="PBLeft" class="rtc-silder-bottom-left">
                    &nbsp;</div>
                <div idkey="PBMiddle" class="rtc-silder-botom-middle">
                    &nbsp;
                </div>
                <div idkey="PBRight" class="rtc-silder-bottom-right">
                    &nbsp;</div>
            </div>
            <div idkey="sliderCtrl" class="rtc-slider">
                <span class="rtc-slider-mask rtc-mask-left" idkey="dropleft">&nbsp;</span>
                <div class="rtc-slider-l-handler" idkey="dropleftimage">
                    &nbsp;</div>
                <div class="rtc-slider-mid-handler" style="position: absolute;">
                    <img width="1" height="1" src="http://im.morningstar.com/im/dot_clear.gif" />
                </div>
                <div class="rtc-slider-r-handler" idkey="droprightimage">
                    &nbsp;</div>
                <span class="rtc-slider-mask rtc-mask-right" idkey="dropright">&nbsp; </span>
                <div>
                </div>
            </div>
            <div idkey="DividendInfo" class="rtc-message-label">
            </div>
        </div>
    </div>
    <div id="log">
    </div>
    <div class="rtq-window-setpn" style="display: block; top: 0px; left: 753px; z-index: 9117;
        visibility: visible;">
        <div class="wrap">
            <h4>
                Chart Options</h4>
            <div class="ctn" id="chartSetting">
                <tr>
                    <td >
                        <strong>Chart Cursor</strong>
                    </td>
                    <td >
                        <strong>Chart Type</strong>
                    </td>
                </tr>
                <tr>
                <td >
                        <div class="rtc-setting-row">
                            <ul>
                                <li menuitemstyle="item" idkey="cursorType" class="rtc-pmtxt" style="width: 70px"><a
                                    href="javascript:void(0)" mname="cursorType">Line</a>
                                    <ul idkey="divCursorType">
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="0" catkey="cursorType">
                                            Track Ball</a></li>
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="1" catkey="cursorType">
                                            Crosshair</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <td >
                        <div class="rtc-setting-row">
                            <ul>
                                <li menuitemstyle="item" idkey="lineType" class="rtc-pmtxt" style="width: 84px"><a
                                    href="javascript:void(0)" mname="chartStyle">Line</a>
                                    <ul idkey="divPlotStyle">
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="lines" catkey="lineType">
                                            Line</a></li>
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="ohlc" catkey="lineType">
                                            OHLC</a></li>
                                        <li><a href="javascript:void(0)" menuitemstyle="trigger" value="candle" catkey="lineType">
                                            Candlestick</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                
            </div>
        </div>
        <div class="rtq-window-setpn-ft">
            <div class="ft-inner">
            </div>
        </div>
    </div>
    <!--<div onclick="javascript:chartCom.acceptTicker('NYSE:IBM')">change size</div>-->
    <br />
    <div onclick="javascript:saveConfig()">
        save</div>
    <br />
    <div onclick="javascript:redraw()">
        redraw</div>
    <div onclick="javascript:accept('NYSE:IBM')">
        test</div>

    <script language="javascript" type="text/javascript">
    var config={Width:750,Height:500};
    var chartCom = new RTChartComponent("XNAS:MSFT","USA","en-USA");
    chartCom.setCursorStyle(0);
    var setting = document.getElementById("chartSetting");
    chartCom.initUIConfig({RightMenu:true,Chart:{showPChart:true,showVChart:true,showLegend:true,showTimeSlider:true},chartCtrl:"rtqPanel",settingPanel:setting});
    chartCom.Init("container","chartCom",chartCom,config); 
   	//SimpleContextMenu.setup({'preventDefault':false, 'preventForms':false});
   // SimpleContextMenu.attach('container-rmenu', 'container_CM1');
    function saveConfig()
    {
     var profile = chartCom.saveConfig();
     config.Profile = profile;
    }

    function redraw()
    { chartCom.clearUp();
      //CollectGarbage();
      chartCom = new RTChartComponent("NAS:MSFT","USA","en-USA");
      chartCom.initUIConfig({RightMenu:false,Chart:{showPChart:true,showVChart:true,showLegend:true,showTimeSlider:true},chartCtrl:"rtqPanel",settingPanel:setting});
      chartCom.Init("container","chartCom",chartCom,config); 
     
    }
    var w = 500, h=300;
    function accept(ticker)
    {if(chartCom!=null) 
    chartCom.acceptTicker("NYSE:IBM");
    chartCom.changeOutSize(w+30,h+20);
    w+=30; h+=20;
    //chartCom.testPASR();
    }
   //window.attachEvent("onunload",function(){chartCom.clearUp();});
   //initPage("container");
</script>

</body>
</html>
